<template>
  <div id="location-selection">
    <p class="immich-form-label">{{ $t('place').toUpperCase() }}</p>

    <div class="grid grid-auto-fit-40 gap-5 mt-1">
      <div class="w-full">
        <Combobox
          label="Country"
          :onSelect="handleCountrySelect"
          :options="countriesOptions"
          :placeholder="$t('search_country')"
          :selectedOption="filters.country"
        />
      </div>

      <div class="w-full">
        <Combobox
          label="State"
          :onSelect="handleStateSelect"
          :options="statesOptions"
          :placeholder="$t('search_state')"
          :selectedOption="filters.state"
        />
      </div>

      <div class="w-full">
        <Combobox
          label="City"
          :onSelect="handleCitySelect"
          :options="citiesOptions"
          :placeholder="$t('search_city')"
          :selectedOption="filters.city"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { getSearchSuggestions, SearchSuggestionType } from '@immich/sdk';
import { handleError } from '@/utils/handle-error';
import { t } from 'vue-i18n';
import Combobox from '@/components/shared-components/combobox.vue';

export default {
  name: 'SearchLocationSection',
  components: {
    Combobox,
  },
  data() {
    return {
      filters: {
        country: '',
        state: '',
        city: '',
      },
      countries: [],
      states: [],
      cities: [],
    };
  },
  computed: {
    countriesOptions() {
      return this.countries.map(country => ({ value: country, label: country }));
    },
    statesOptions() {
      return this.states.map(state => ({ value: state, label: state }));
    },
    citiesOptions() {
      return this.cities.map(city => ({ value: city, label: city }));
    },
  },
  methods: {
    ...mapActions('user', ['resetUserInteraction', 'setRecentAlbums']),
    async updateCountries() {
      try {
        const results = await getSearchSuggestions({
          $type: SearchSuggestionType.Country,
          includeNull: true,
        });
        this.countries = results.map(result => result ?? '');
        if (this.filters.country && !this.countries.includes(this.filters.country)) {
          this.filters.country = '';
        }
      } catch (error) {
        handleError(error, t('failed_to_load_assets'));
      }
    },
    async updateStates(country) {
      try {
        const results = await getSearchSuggestions({
          $type: SearchSuggestionType.State,
          country,
          includeNull: true,
        });
        this.states = results.map(result => result ?? '');
        if (this.filters.state && !this.states.includes(this.filters.state)) {
          this.filters.state = '';
        }
      } catch (error) {
        handleError(error, t('failed_to_load_assets'));
      }
    },
    async updateCities(country, state) {
      try {
        const results = await getSearchSuggestions({
          $type: SearchSuggestionType.City,
          country,
          state,
        });
        this.cities = results.map(result => result ?? '');
        if (this.filters.city && !this.cities.includes(this.filters.city)) {
          this.filters.city = '';
        }
      } catch (error) {
        handleError(error, t('failed_to_load_assets'));
      }
    },
    handleCountrySelect(option) {
      this.filters.country = option;
      this.updateStates(option);
    },
    handleStateSelect(option) {
      this.filters.state = option;
      this.updateCities(this.filters.country, option);
    },
    handleCitySelect(option) {
      this.filters.city = option;
    },
  },
  async mounted() {
    await this.updateCountries();
  },
};
</script>

<style scoped>
/* ... existing code ... */
</style>